<template>
    <div class="page info">
        <nav-bar title="店铺收款" @click-left="back"></nav-bar>
        <div class="progress">
            <steps :active="nowStep" active-color="#3978f5">
                <step>店铺信息</step>
                <step>身份证</step>
                <step>结算卡信息</step>
            </steps>
        </div>
        <div v-if="nowStep==0">
            <store-info ref="storeInfoRef"></store-info>
        </div>
        <div v-if="nowStep==1">
            <id-card ref="idCardInfoRef" showType="1"></id-card>
        </div>
        <div v-if="nowStep==2">
            <bank-card ref="bankCardInfoRef" :shareInfo="shareInfo"></bank-card>
        </div>
        <div class="box_con1">
            <van-button type="info" size="large" @click="nextStep">{{buttMsg}}</van-button>
        </div>
        <pop-inp ref="popInpRef" @commit="commit"></pop-inp>
    </div>
</template>

<script>
import { Step, Steps } from "vant";
import { mapState } from "vuex";

import StoreInfo from "@/components/form/store-info.vue";
import IdCard from "@/components/form/id-card.vue";
import BankCard from "@/components/form/bank-card.vue";
import PopInp from "@/components/pop/pop-inp";

export default {
    components: { StoreInfo, Step, Steps, IdCard, BankCard, PopInp },

    provide() {
        return {
            sendCode: this.sendCode,
        };
    },

    data() {
        return {
            nowStep: 0,
            shareInfo: {
                merchantProperty: "", // 商户性质 4：个人 1：企业
                certificateName: "", // 证件姓名
            },
        };
    },

    mounted() {
        this.nowStep = 0;
    },

    computed: {
        ...mapState({
            baseData: (state) => state.baseData,
            custInfo: state => state.homeData.custInfo,
        }),
        buttMsg() {
            if (this.nowStep == 2) {
                return "完成";
            } else {
                return "下一步";
            }
        },
    },

    methods: {
        back() {
            this.$dialog
                .confirm({
                    title: "提示",
                    message: "内容还未保存，确定关闭吗？",
                    confirmButtonText: "退出",
                    cancelButtonText: "继续填写",
                })
                .then(() => {
                    this.$router.back();
                })
                .catch(() => { });
        },

        // 发送验证码
        sendCode(_mobilePhone) {
            if (this.$check.start(_mobilePhone, "手机号").isNull().isTell().endShow()) {
                return Promise.resolve(false);
            }
            const params = {
                mobilePhone: _mobilePhone,
            };
            return this.$http.smsLogin(params);
        },

        nextStep() {
            if (this.nowStep == 0) {
                let params = this.$refs.storeInfoRef.submitForm();
                this.shareInfo.merchantProperty = params.merchantProperty;
                this.$http.collectionSaveBase(params).then((respData) => {
                    if (respData === false) {
                        return false;
                    }
                    // 更新商户号
                    this.$store.commit("setHomeData", {
                        custInfo: { merchantCode: respData }
                    });
                    this.nowStep = 1;
                });
                // this.nowStep = 1;
            } else if (this.nowStep == 1) {
                let params = this.$refs.idCardInfoRef.submitForm();
                this.shareInfo.certificateName = params.certificateName;
                this.$http.collectionSaveIdCard(params).then((respData) => {
                    if (respData === false) {
                        return false;
                    }
                    this.nowStep = 2;
                });
            } else if (this.nowStep == 2) {
                // 完成
                let params = this.$refs.bankCardInfoRef.submitForm();
                this.$http.collectionSaveBankInfo(params).then((respData) => {
                    if (respData === false) {
                        return false;
                    }
                    this.$refs.popInpRef.show();
                    this.sendCode().then((resp) => {
                        if (resp === false) {
                            return resp;
                        }
                        this.$refs.popInpRef.startCountDown();
                    });
                });
                // this.$router.back();
            }
        },

        sendCode() {
            console.log("发送验证码");
            return this.$http.collectionSendCode();
        },

        // 提交
        commit(code) {
            let params = {
                merchantCode: this.custInfo.merchantCode,
                smsCode: code,
            };
            this.$http.collectionSubmit(params).then((resp) => {
                if (resp === false) {
                    return resp;
                }
                this.$router.back();
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.info {
    width: 100%;

    .progress {
        padding: 0 40px;
        background-color: #fff;
    }

    .box_con1 {
        padding: 20px 10px;
    }
}
</style>
